<template>
  <van-popup v-model:show="showPicker" round position="bottom">
    <van-picker
      :columns="columns"
      :columns-field-names="customFieldName"
      @confirm="onConfirm"
      @cancel="showPicker = false"
    />
  </van-popup>
</template>

<script setup lang="ts">
import { ref, defineProps, computed, defineEmits, onMounted, watch } from 'vue'
import { getList } from '/@/api/system/tenant'

interface Region {
  hasChildren: boolean
  id: string
  key: string
  parentId: string
  title: string
  value: string
  children: Region[]
}

const props = defineProps({
  visible: {
    type: Boolean,
    default: false,
  },
  modelValue: {
    type: String,
    default: '',
  },
  regionIds: {
    type: Array,
    default: () => [],
  },
})

const emit = defineEmits(['update:visible', 'update:modelValue'])

const customFieldName = {
  text: 'name',
}

const columns = ref([
  {
    name: '一年级',
    value: '1',
  },
  {
    name: '二年级',
    value: '2',
  },
  {
    name: '三年级',
    value: '3',
  },
  {
    name: '四年级',
    value: '4',
  },
  {
    name: '五年级',
    value: '5',
  },
  {
    name: '六年级',
    value: '6',
  },
  {
    name: '初一',
    value: '7',
  },
  {
    name: '初二',
    value: '8',
  },
  {
    name: '初三',
    value: '9',
  },
  {
    name: '高一',
    value: '10',
  },
  {
    name: '高二',
    value: '11',
  },
  {
    name: '高三',
    value: '12',
  },
])

const showPicker = computed({
  get() {
    return props.visible
  },
  set(val) {
    emit('update:visible', val)
  },
})

const value = computed({
  get() {
    return props.modelValue
  },
  set(val) {
    emit('update:modelValue', val)
  },
})

const cascaderValue = ref('')
const options = ref<Region[]>([])

watch(showPicker, async (show) => {
  if (show) {
    const regionCode = props.regionIds.join(',')
    const { data } = await getList(1, 100, { regionCode })
  }
})

function onConfirm(item: any) {
  value.value = item
  showPicker.value = false
}
</script>

<style lang="less" scoped></style>
